<ion-header>

  <ion-toolbar>
    <ion-title>Item Icons</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content>

  <ion-item detail-push>
    ion-item [detail-push] attr
  </ion-item>

  <a ion-item href="#">
    a[ion-item] w/ push detail
  </a>

  <button ion-item>
    button[ion-item] w/ push detail
  </button>

  <a ion-item href="#">
    a[ion-item] w/ right side default icon
    <ion-icon name="information-circle" item-end></ion-icon>
  </a>

  <a ion-item href="#">
    a[ion-item] w/ right side large icon
    <ion-icon name="information-circle" large item-end></ion-icon>
  </a>

  <a ion-item href="#">
    a[ion-item] w/ right side small icon
    <ion-icon name="information-circle" small item-end></ion-icon>
  </a>

  <button ion-item>
    <ion-icon name="star" item-start></ion-icon>
    button[ion-item] w/ left side icon
  </button>

  <button ion-item detail-none>
    <ion-icon name="flag" item-start></ion-icon>
    button[ion-item][detail-none]
  </button>

  <ion-item>
    <ion-icon name="flag" item-start></ion-icon>
    ion-item w/ both side icons
    <ion-icon name="checkmark" item-end></ion-icon>
  </ion-item>

  <a ion-item href="#">
    a[ion-item] w/ two right side icons
    <ion-icon name="checkmark-circle" item-end></ion-icon>
    <ion-icon name="shuffle" item-end></ion-icon>
  </a>

  <button ion-item>
    <ion-icon name="clipboard" item-start></ion-icon>
    <ion-icon name="remove-circle" item-start></ion-icon>
    button[ion-item] w/ two left side icons
  </button>

  <button ion-item>
    Red Balloons
    <ion-badge item-end>99</ion-badge>
  </button>

  <ion-item>
    Problems
    <ion-badge item-end>99</ion-badge>
  </ion-item>

</ion-content>